<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>vuex</title>
</head>

<body>
  <div id="app">
    {{name}}
    {{this.$store.state.hello}}
    {{this.$store.getters.getName}}
  </div>
</body>
<script type="module">
  import Vue from 'https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.esm.browser.js'
  import Vuex from './index.js'
  Vue.use(Vuex)
  const store = new Vuex.Store({
    state: {
      hello: 'hello'
    },
    getters: {
      getName: function (state) {
        return state.hello + 99 + 'getters'
      }
    },
    mutations: {
      setname(state, val) {
        state.hello = val
      }
    },
    actions: {
      asyncName({ commit }) {
        setTimeout(function () {
          commit('setname', 'async name')
        }, 1000)
      }
    }
  })

  
  const vm = new Vue({
    el: '#app',
    store,
    data: {
      name: 'tian'
    },
    mounted() {
      this.$store.commit('setname', 'vvtian')
      this.$store.dispatch('asyncName')
    },
  })
</script>

</html>